<template>
  <view class="page-content">
    <!-- <up-button type="primary" text="立即登录" @click="UserLogin()"></up-button> -->
    <view class="container">
      <view class="userinfo">
        <block v-if="!hasUserInfo">
          <button v-if="canIUseGetUserProfile" @click="getUserProfile">
            获取头像昵称
          </button>
          <button
            v-else
            open-type="getUserInfo"
            @click="getUserProfile"
            class="login-btn"
          >
            点击登录
          </button>
        </block>
        <block v-else>
          <image
            @click="UserLogin"
            class="userinfo-avatar"
            :src="userInfo.avatarUrl"
            mode="cover"
          ></image>
          <text class="userinfo-nickname">{{ userInfo.nickName }}</text>
        </block>
        <block>
          <view class="login-close" @click="goBack()">取消登录</view>
        </block>
      </view>
    </view>
  </view>
</template>
  
  <script setup>
import { reactive, ref } from "vue";
import {
  UserLogin, // 用户登录
  GetLoginInfo, // 获取用户信息
} from "@/api/common.js";

import { getStorageData, setStorageData } from "@/utils/storageData.js";

let userInfo = ref({});
let hasUserInfo = ref(false);
let canIUseGetUserProfile = ref(false);

const getUserProfile = (e) => {
  // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
  // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
  wx.getUserProfile({
    desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      uni.login({
        provider: "weixin",
        onlyAuthorize: true, // 微信登录仅请求授权认证
        success: async function (event) {
          console.log(event, "event");
          let params = {
            code: event.code,
            encryptedData: res.encryptedData,
            iv: res.iv,
          };
          try {
            uni.showLoading({
              title: "加载中",
            });
            let { data } = await UserLogin(params);
            setStorageData("token", data.token);
            setStorageData("loginInfo", data);
            let { data: userInfo } = await GetLoginInfo();
            setStorageData("userInfo", JSON.stringify(userInfo));
            uni.hideLoading();
            uni.switchTab({
              url: "/pages/home/index",
            });
          } catch (error) {
            uni.hideLoading();
          }
        },
        fail: function (err) {
          // 登录授权失败
          // err.code是错误码
        },
      });
    },
  });
};

// const UserLogin = () => {
//   wx.getUserProfile({
//     success: function (res) {
//       // var userInfo = res.userInfo;
//       // var nickName = userInfo.nickName;
//       // var avatarUrl = userInfo.avatarUrl;
//       // var gender = userInfo.gender; //性别 0：未知、1：男、2：女
//       // var province = userInfo.province;
//       // var city = userInfo.city;
//       // var country = userInfo.country;

//       console.log(res, "res");
//     },
//   });
//   uni.login({
//     provider: "weixin",
//     onlyAuthorize: true, // 微信登录仅请求授权认证
//     success: function (event) {
//       console.log(event, "event");
//     },
//     fail: function (err) {
//       // 登录授权失败
//       // err.code是错误码
//     },
//   });
// };

const predetermine = (item) => {
  uni.navigateTo({
    url: "/pages/predetermine/index?types=" + item.id,
  });
};

const goBack = () => {
  uni.navigateBack({
      delta: 1,
    });
}
</script>
  
  <style lang="scss" scoped>
.page-content {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  box-sizing: border-box;
}
.login-btn {
  background: $uni-color-primary;
  color: #fff;
  margin-top: -10vh;
}
.login-close{
  text-align: center;
  margin-top: 20rpx;
}
</style>
  